<template>
	<view class="swiper">
		<customSwiper :swiper-list="list" v-if="list.length>0"/>
	</view>
</template>

<script>
	import customSwiper from '@/components/blackmonth-swiper/index'
	export default {
		components: {
			customSwiper
		},
		data() {
			return {
				list: [],
				swiperList: [{
					type: 'image',
					url: 'https://ossweb-img.qq.com/images/lol/web201310/skin/big84000.jpg'
				}, {
					type: 'image',
					url: 'https://ossweb-img.qq.com/images/lol/web201310/skin/big37006.jpg',
				}, {
					type: 'image',
					url: 'https://ossweb-img.qq.com/images/lol/web201310/skin/big39000.jpg'
				}, {
					type: 'image',
					url: 'https://ossweb-img.qq.com/images/lol/web201310/skin/big10001.jpg'
				}, {
					type: 'image',
					url: 'https://ossweb-img.qq.com/images/lol/web201310/skin/big25011.jpg'
				}, {
					type: 'image',
					url: 'https://ossweb-img.qq.com/images/lol/web201310/skin/big21016.jpg'
				}, {
					type: 'image',
					url: 'https://ossweb-img.qq.com/images/lol/web201310/skin/big99008.jpg'
				}]
			}
		},

		created() {
			this.setList()
		},
		methods: {
			change(e) {
				console.log('当前轮播信息：', e)
			},
			//点击轮播
			click(e) {
				console.log('点击轮播', e)
			},
			//数据赋值
				async setList(){
							let boredApe = await this.$http.sendrequest({url:'/goods/flashcardConfig'});
							if(boredApe.code == '0') {
								this.list = boredApe.data.flashcardList.map((item,index)=>{
									let num = 10,length = boredApe.data.flashcardList.length;
									let tran = 50 - length/2 * num;
									const obj = {
										icon:item.image,
										judge: index == 0 ? true : false,
										style:{
											'left':tran +  (length - index) * num + '%',
											'z-index':99 - index,
											'top':60 + 80/length + 'rpx !important',
											'animation-delay':0.1 * index * 4 + 's',
										}
									}
									return obj;
								})
								// this.setTime();
							}
						},
			//开始动画
			setTime() {
				let i = 1;
				const _time = setInterval(() => {
					if (this.list[i]) this.list[i].judge = true;
					i++
					if (i == 5) clearInterval(_time)
				}, 300)
			}
		}
	}
</script>

<style lang="scss" scoped>
	.swiper {
		position: relative;

		// width: 100rpx;
		// height: 300rpx;
		.slide-image {
			position: absolute;
			height: 300rpx;
			// width: 570rpx;
			border-radius: 15rpx;
			z-index: 5;
			opacity: 0.7;
			top: 18%;
			margin: 0 20rpx;
		}

		swiper {
			height: 500rpx;
		}

		.active {
			opacity: 1;
			z-index: 10;
			height: 500rpx;
			// width: 572rpx;
			top: 7%;
			transition: all 0.2s ease-in 0s;
		}


	}

	.diyMainlandAnimation {
		position: relative;
		width: 100rpx;
		height: 300rpx;

		.image {
			// position: absolute;
			// left: 50%;
			// top: 60rpx;
			// transform: translate(-50%, -50%);
			// z-index: 99;
			width: 236rpx;
			height: 300rpx;
		}

		._image_0 {
			animation: myfirst 2s linear infinite alternate;
		}

		._image_1 {
			animation: myfirst_2 2s linear infinite alternate;
		}
	}

	@keyframes myfirst {
		from {
			top: 60rpx;
		}

		to {
			top: 140rpx;
		}
	}

	@keyframes myfirst_2 {
		from {
			top: 140rpx;
		}

		to {
			top: 60rpx;
		}
	}
</style>